<template>
  <div class="rank">
    <ul class="rankList">
      <li v-for="(v, i) in getHotRank" :key="i">
        <span>{{ i + 1 }}</span
        ><span>{{ v.songName | subSongName }}</span
        ><span>{{ v.note }}</span>
      </li>
      <!-- <li v-for="(v,i) in getHotRank" :key="i"><span>{{i+1}}</span><span>{{v.songName|subSongName}}</span><span>{{v.note}}</span></li> -->
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    getHotRank() {
      return this.$store.state.search.rankData[0].rankList;
    },
  },
  filters: {
    subSongName(val) {
      if (val.length > 6) {
        return val.substr(0, 5) + "...";
      } else {
        return val;
      }
    },
  },
};
</script>

<style scoped>
.rank {
  width: 6.84rem;
  height: 7.55rem;
  background-color: #fff;
  border-radius: 0.15rem;
  margin: 0 auto;
  padding: 0.5rem 0.35rem 0;
  box-shadow: 0.02rem 0.02rem 0.1rem 0.02rem rgba(0, 0, 0, 0.2);
}

.rankList > li {
  float: left;
  width: 3.07rem;
  height: 0.7rem;
}

.rankList > li span {
  display: inline-block;
}

.rankList > li span:nth-of-type(1) {
  width: 0.47rem;
  font-size: 0.28rem;
  color: #a7a7a7;
}

.rankList > li span:nth-of-type(2) {
  font-size: 0.28rem;
}

.rankList > li span:nth-of-type(3) {
  font-size: 0.18rem;
  color: #ff3130;
  font-style: italic;
  font-weight: bolder;
  margin-left: 0.13rem;
}

.rankList > li:nth-of-type(-n + 3) span:nth-of-type(1),
.rankList > li:nth-of-type(-n + 3) span:nth-of-type(3) {
  color: red;
  font-weight: bold;
}

.rankList > li:nth-of-type(-n + 3) span:nth-of-type(2) {
  color: #000;
  font-weight: bold;
}
</style>
